#semanticsContainer editor {
  border: 2px solid #ccc;
  padding: 4px 8px;
  background: white;
  border-radius: 6px;
  box-shadow: 1px 1px 8px 0px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  margin: 8px 10px;
  overflow: scroll;
}

editor rule {
  font-family: Menlo, Monaco, sans-serif;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  margin: 2px 8px;
}
editor rule cstNodeName:not(.default)::after {
  content: '\003D';
  clear: both;
  margin: 0 3px;
}
editor rule blocks {
  margin-left: 20px;
}
editor rule blocks::after {
  float: left;
  margin-left: 2px;
  margin-top: -2px;
  font-family: Optima;
  content: '\2192';
  color: slateblue;
  font-size: 16pt;
}
editor rule block {
  padding-top: 5px;
  padding-bottom: 5px;
  float: left;
  margin-left: 5px;
}
editor rule block div,
editor rule cstNodeName {
  color: rgb(123, 123, 123);
  float: left;
}
editor rule block div {
  display: flex;
  flex-direction: column;
  cursor: default;
}
editor rule block div > * {
  flex: 1;
}
editor rule block div span {
  color: orange;
  border-top: 1px solid;
  font-size: 6px;
  float: right;
}
editor rule block div:hover span {
  font-weight: bolder;
  font-size: 9px;
}
editor rule block real {
  display: inline-block;
  height: 12px;
  outline: none;
  padding-top: 8px;
  font: italic 12px Menlo, Monaco, sans-serif;
  color:  slateblue;
  border: white;
  padding-right: 2px;
  width: auto;
}

editor .body {
  padding-left: 10pt;
  overflow: visible;
}
editor .body .CodeMirror {
  cursor: default;
  display: block;
  height: auto;
  width: auto;
  color: slateblue;
  font-size: 16px;
  position: relative;
  font-family: Menlo, Monaco, sans-serif;
}
editor .body .CodeMirror-lines {
  padding: 8px;
}
editor .body .CodeMirror-lines pre{
  padding-left: 0px;
}
